<template>
  <div class="main" :style="{ 'flex-direction': flexDirection }" ref="partitionDragRef">
    <slot></slot>
  </div>
</template>
<script>
import { ref, reactive, getCurrentInstance, onMounted, provide, nextTick } from 'vue';
export default {
  name: "partition-drag",
  components: {
  },
  props: {
    // column row
    flexDirection: {
      type: String,
      default: "row"
    }
  },
  setup(props, context) {
    const partitionDragRef = ref();
    const slotSettings = ref([]);
    const partitionDragInit = reactive({
      isInit: false,
      info: {}
    });
    const datas = reactive({
    })

    provide("slotSettings", slotSettings);
    provide("partitionDragInit", partitionDragInit);

    const { proxy } = getCurrentInstance();

    const methods = {
      setSlotSettings(slotSettings) {
        datas.slotSettings = slotSettings;
      }
    }

    

    onMounted(() => {
      nextTick(() => {
        const offsetHeight = partitionDragRef.value.offsetHeight;
        const offsetWidth = partitionDragRef.value.offsetWidth;
        proxy.$slots.default().forEach(item => {
          // console.log("item", item)
          if(item.type.name == "partition-drag-block" || item.type.name == "partition-drag-line"){
            slotSettings.value.push({
              keyId: item.props.keyId,
              minValue: item.props?.minValue, 
              maxValue: item.props?.maxValue, 
              originalFlex: item.props.originalFlex,
              initFlex: item.props.originalFlex,
              show: true
            })
          }
        })
        // console.log("slotSettings", slotSettings.value)
        partitionDragInit.isInit = true;
        partitionDragInit.info.offsetHeight = offsetHeight;
        partitionDragInit.info.offsetWidth = offsetWidth;
        partitionDragInit.info.flexDirection = props.flexDirection; 
      })
    })



    return {
      partitionDragRef,
      ...methods
    }
  }
}


</script>

<style lang="scss" scoped>
.main {
  display: flex;
}
</style>